<%--
  Created by IntelliJ IDEA.
  User: 任
  Date: 2020/1/13
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登陆页面</title>
    <link href="/static/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" type="text/css">
    <style>
        /* #Reset & Basics (Inspired by E. Meyers)
        ================================================== */
        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline; }
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block; }
        body {
            line-height: 1; }
        ol, ul {
            list-style: none; }
        blockquote, q {
            quotes: none; }
        blockquote:before, blockquote:after,
        q:before, q:after {
            content: '';
            content: none; }
        table {
            /*border-collapse: collapse;*/
            border-spacing: 0; }

        /* #Basic Styles
        ================================================== */
        body {
            background:#87CEFA;
            overflow:hidden;
            font:normal 16px/1.5 Helvetica, "Microsoft Yahei", Arial, sans-serif;
            color:#444;
            -webkit-font-smoothing:antialiased; /* Fix for webkit rendering */
            -webkit-text-size-adjust:100%;
        }
        input {padding:10px 15px;outline:0;border:0;border-radius:3px;width:200px;}
        a, a:visited { color: #333; text-decoration: none; outline: 0; }
        a:hover, a:focus { color: #000;}

        /*云层*/
        #clouds{position:absolute;top:0;right:0;bottom:0;left:0;}
        [class^="cloud-"]{position:absolute;right:120%;width:200px;height:60px;background:white;-webkit-border-radius:200px;-moz-border-radius:200px;border-radius:200px;}
        [class^="cloud-"]:before,[class^="cloud-"]:after{content:'';position:absolute;top:-15px;left:10px;width:100px;height:80px;background:#fff;-webkit-border-radius:100px;border-radius:100px;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);}
        [class^="cloud-"]:after {top: -55px;left: auto;right: 15px;width: 120px;height: 120px;}
        .cloud-1 {top: 50px;-webkit-animation: moveclouds 30s linear infinite;-moz-animation: moveclouds 30s linear infinite;-o-animation: moveclouds 30s linear infinite;animation: moveclouds 30s linear infinite;}
        .cloud-2 {top: 100px;opacity: 0.8;-webkit-transform: scale(0.8);-moz-transform: scale(0.8);transform: scale(0.8);-webkit-animation: moveclouds 45s linear infinite;-moz-animation: moveclouds 45s linear infinite;-o-animation: moveclouds 45s linear infinite;animation: moveclouds 45s linear infinite;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;animation-delay: 5s;}
        .cloud-3 {top: 150px;opacity: 0.6;-webkit-transform: scale(0.6);-moz-transform: scale(0.6);transform: scale(0.6);-webkit-animation: moveclouds 40s linear infinite;-moz-animation: moveclouds 40s linear infinite;-o-animation: moveclouds 40s linear infinite;animation: moveclouds 40s linear infinite;}
        .cloud-4 {top: 200px;opacity: 0.75;-webkit-transform: scale(0.75);-moz-transform: scale(0.75);transform: scale(0.75);-webkit-animation: moveclouds 26s linear infinite;-moz-animation: moveclouds 26s linear infinite;-o-animation: moveclouds 26s linear infinite;animation: moveclouds 26s linear infinite;-webkit-animation-delay: 8s;-moz-animation-delay: 8s;animation-delay: 8s;}
        /*云层移动*/
        @-webkit-keyframes moveclouds {
            0%   { right: -20%; }
            100% { right: 120%; }
        }
        @-moz-keyframes moveclouds {
            0%   { right: -20%; }
            100% { right: 120%; }
        }
        @-o-keyframes moveclouds {
            0%   { right: -20%; }
            100% { right: 120%; }
        }


        /* #Content Styles
        ================================================== */
        /*内容*/
        #content{width:100%;}
        .container{width:960px;margin:0 auto;text-align:center;}
        /*登录/注册*/
        #login,#register{width:400px;height:380px;position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;background:#F8F8F8;border-radius:10px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.5);}
        #register{left:120%;}
        #login_header,#register_header{height:60px;line-height:60px;font-size:20px;font-weight:bold;color:#77CA60;background:#FFF;border-radius:10px 10px 0 0;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .1);box-shadow:0 1px 3px rgba(0, 0, 0, .1);}
        .icon-home{font-size:30px;position:relative;top:3px;}

        #login_content,#register_content{height:200px;padding:30px 20px;}
        input{width:300px;padding:14px 15px;background:#F0F0F0;font:normal 16px/1.5 Helvetica,"Microsoft Yahei",Arial,sans-serif;color:#444;}
        span{position:relative;display:inline-block;height:50px;margin-bottom:30px;}
        .tip{text-indent:80px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
        .tip:focus,.tip:active{text-indent:0;}
        .tip + label{position:absolute;top:16px;left:15px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
        .tip:focus + label,.tip:active + label{-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);transform:translateY(-40px);}
        .icon-user,.icon-lock{position:absolute;top:16px;right:14px;color:#999;}
        .tooltip{width:200px;padding:14px;position:absolute;left:20%;top:0;right:0;color:#999;background:white;text-align:left;z-index:-1;box-shadow:0 1px 3px rgba(0, 0, 0, .1);}
        .tooltip:after{width:0;height:0;content:"";position:absolute;right:100%;top:18px;color:#87CEFA;border:8px solid;border-right-color:white;}

        #login_footer,#register{}
        #login_btn,#register_btn{width:100%;height:60px;line-height:60px;outline:0;border:none;color:white;font-weight:bold;font-size:20px;background:#77CA60;border-radius:0 0 10px 10px;cursor:pointer;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.3);}
        .ing{width:100%;height:5px;position:absolute;bottom:60px;}

        #register_link,#login_link{width:80px;display:block;margin:20px auto;color:white;border-bottom:1px dashed;}

        /*下拉菜单*/
        .option{width:330px;position:absolute;margin:0 0 0 15px;text-align:left;background:#F0F0F0;cursor:pointer;border-radius:3px;}
        .option_result{display:inline-block;padding:11px 15px;}
        .option_arrow{padding:10px 19px;float:right;}
        .option_arrow .arrow{width:0;height:0;font-size:0;border:6px solid;border-color:#6F7880 #F0F0F0 #F0F0F0;}
        .option_list{background:#F3F3F3;display:none;}
        .option_list li{padding:10px 15px;float:none;}
        .option_list li:hover{background:#DFDFDF;}
    </style>
</head>
<body>
<!-- 背景云层 -->
<div id="header">
    <div id="clouds">
        <div class="cloud-1" data-speed="35000"></div>
        <div class="cloud-2" data-speed="45000" data-delay="15000"></div>
        <div class="cloud-3" data-speed="40000"></div>
        <div class="cloud-4" data-speed="38000" data-delay="20000"></div>
    </div>
</div><!-- / #header -->

<div id="content">
    <div class="container">
        <!-- 登录模块 -->
        <form id="login" method="post" action="/user/login" onsubmit="return checkForm(this);">
            <div id="login_header"><i class="icon-home"></i>智能售楼服务管理系统</div>

            <div id="login_content">
                    <span>
                        <input value="${login}" class="tip" name="username" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
                        <label for="username">用户名</label>
                        <i class="icon-user"></i>
                        <div class="tooltip" data-text="用户名/邮箱/电话">用户名/邮箱/电话</div>
                    </span>
                <span>
                        <input class="tip" id="userpassword" name="userpassword" type="password" maxlength="16" onclick="onClick(this);" onblur="onBlur(this);">
                        <label for="userpassword">密码</label><br>${error}
                        <i class="icon-lock"></i>
                        <div class="tooltip" data-text="填写您的密码">填写您的密码</div>
                    </span>
                <div class="option">
                    <div class="option_result">登陆类型</div>
                    <div class="option_arrow"><b class="arrow"></b></div>
                    <ul class="option_list">
                      <%--  <li>登陆</li>--%>
                        <li><a href="/jsp/registemail.jsp">邮箱注册</a></li>
                        <li><a href="/jsp/email.jsp">手机注册</a></li>
                    </ul>
                    <div class="tooltip" data-text="选择您的用户类型">选择您的用户类型</div>
                </div><!-- / .option -->
            </div><!-- / #login_content -->

            <div id="login_footer">
                <div class="ing"></div>
                <button id="login_btn" type="submit">登录</button>
            </div><!-- / #login_footer -->

            <div><a id="register_link" href="/jsp/regist.jsp">新用户注册</a></div>
        </form><!-- / #login -->

      <%--  <!-- 注册模块 -->
        <form id="register" method="post" action="register.jsp" onsubmit="return checkForm(this);">
            <div id="register_header"><i class="icon-home"></i>新用户注册</div>

            <div id="register_content">
                    <span>
                        <input class="tip" name="realname" type="text" maxlength="4" onclick="onClick(this);" onblur="onBlur(this);">
                        <label for="realname">真实姓名</label>
                        <i class="icon-user"></i>
                        <div class="tooltip" data-text="填写您的真实中文姓名">填写您的真实中文姓名</div>
                    </span>
                <span>
                        <input class="tip" name="ID" type="text" maxlength="18" onclick="onClick(this);" onblur="onBlur(this);">
                        <label for="ID">身份证号</label>
                        <i class="icon-lock"></i>
                        <div class="tooltip" data-text="填写您的真实身份证号码">填写您的真实身份证号码</div>
                    </span>
                <span>
                        <input class="tip" name="password" maxlength="16" type="password" onclick="onClick(this);" onblur="onBlur(this);">
                        <label for="password">密码</label>
                        <i class="icon-lock"></i>
                        <div class="tooltip" data-text="填写6~16个字母或者数字">填写6~16位字母或者数字</div>
                    </span>
            </div><!-- / #register_content -->

            <div id="register_footer">
                <div class="ing"></div>
                <button id="register_btn" type="submit">注册</button>
            </div><!-- / #register_footer -->

            <div><a id="login_link" href="javascript:void(0);">返回登录</a></div>
        </form><!-- / #register -->

    </div><!-- / .container -->--%>
</div><!-- / #content-->
<div id="footer">
    <div class="container">

    </div><!-- / .container -->

</div><!-- / #footer -->
  <script src="/static/js/jquery-1.8.3.min.js" type="text/javascript"></script>
  <script>


      /*自己写的*/
     /* $(function(){
          //接收登陆按钮
        var  option_list=$(".option_list").val();
        if(option_list=="邮箱登陆"){
        location.href("/jsp/success.jsp");
        }
      })*/
      /*  $(function(){
            var username=$("#username").val();
        if(username==null){
        alert("用户名不能为空!");
        return true;
        }
            var  passowrd=$("#userpassword").val();
            if(passowrd==null){
                alert("密码不能为空!");
                return true;
            }})
        }*/

      /**
       * 输入框被点击
       */
      function onClick(){

          //对函数的第一个参数进行判断
          if (arguments[0]) {
              var obj = arguments[0];
          }else{
              return false;
          }

          //获取.tooltip
          var tooltip = $(obj).siblings('.tooltip');
          //.tooltip如果存在，就滑出
          if (tooltip.length != 0) {
              //对函数第二个参数进行判断
              if (arguments[1]) {
                  var text = arguments[1];
              }else{
                  text = tooltip.data('text');
              }
              //设置提示框文字
              tooltip.text(text);
              //滑出提示框
              tooltip.animate({left:'120%'});
          };
      }

      /**
       * 输入框失去焦点
       */
      function onBlur(){
          //对函数的第一个参数进行判断
          if (arguments[0]) {
              var obj = arguments[0];
          }else{
              return false;
          }

          //获取.tooltip
          var tooltip = $(obj).siblings('.tooltip');
          //.tooltip如果存在，就滑入
          if (tooltip.length != 0) {
              tooltip.animate({left:'20%'});
          };
      }

      /**
       * 表单验证
       */
      function checkForm(){
          //对函数的第一个参数进行判断
          if (arguments[0]) {
              //获取当前表单
              var form = arguments[0];
          }else{
              return false;
          }

          //验证规则汇总
          var id = new RegExp(/[0-9]{18}/);//匹配数字18次，用于身份证号码匹配
          var password = new RegExp(/\w{6,16}/);//字母6到16次，用于密码匹配
          var chinese = new RegExp(/[^\u4e00-\u9fa5]|^$/);//匹配中文以外的字符，用于真实姓名验证
          var email = new RegExp(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/);//用于邮箱格式验证

         /* //用户名username验证(同样适用身份证验证)
          if (form.username != undefined && !id.test(form.username.value)) {
              //不符合匹配规则
              onClick($(form.username)[0],'身份证号码不规范，应为18位数字');
              //阻止页面跳转
              return false;
          };*/

          //密码password验证
          if (form.password != undefined && !password.test(form.password.value)) {
              //不符合匹配规则
              onClick($(form.password)[0],'密码不规范，应为6~16位字母和数字');
              //阻止页面跳转
              return false;
          };

          //用户类型type验证
          if ($(form).find('.option_result').text() == '用户类型') {
              //用户没有勾选
              onClick($('.option_result')[0],'请选择用户类型');
              //阻止页面跳转
              return false;
          };

          //真实姓名realname验证
          if (form.realname != undefined && chinese.test(form.realname.value)) {
              //有非中文字符
              onClick($(form.realname)[0],'姓名不规范');
              //阻止页面跳转
              return false;
          };

          //真实身份证号码id验证
          if (form.ID != undefined && !id.test(form.ID.value)) {
              //不符合匹配规则
              onClick($(form.ID)[0],'身份证号码不规范，应为18位数字');
              //阻止页面跳转
              return false;
          };

          //邮箱email验证
          if (form.email != undefined && !email.test(form.email.value)){
              //不符合匹配规则
              onClick($(form.email)[0],'不是有效地电子邮件地址');
              //阻止页面跳转
              return false;
          };
      }


      $(document).ready(function(){
          /**
           * 展开/收起下拉列表
           */
          $('.option').click(function(){
              $(this).children('.option_list').slideToggle(100);
              $(this).toggleClass('active');
          });

          /**
           * 设置option的值
           */
          $('.option_list li').click(function(){
              //获取选择的值
              var text = $(this).text();
         /*     alert(text);
              if(text=="邮箱登陆"){
                  $("#login_btn").click(function () {
                    location.href="/jsp/email.jsp";
                  })
              }*/
              //设置option的值
              $(this).parent().siblings('.option_result').text(text);
              //如果存在就收起提示栏
              var tooltip = $(this).parent();//原生js的parentNode是属性而不是方法
              if (tooltip.length != 0) {
                  onBlur(tooltip[0]);//需要传入原生js对象
              };
          });

          /**
           * 切换到注册栏
           */
          $('#register_link').click(function(){
              //滑出#login栏，滑入#register栏
              $('#login').animate({left:'-100%'},400,function(){
                  $('#register').animate({left:'50%'});
              });
          });

          /**
           * 切换到登陆栏
           */
          $('#login_link').click(function(){
              //滑出#register栏，滑入#login栏
              $('#register').animate({left:'120%'},400,function(){
                  $('#login').animate({left:'50%'});
              });
          });

          /**
           * 登录
           */
          $('#login_btn').click(function(){
              var $obj = $(this);
              $obj.text('登录中...');
              setTimeout(function(){
                  $obj.text('登录');
              },5000);
          });

          /**
           * 注册
           */
          $('#register_btn').click(function(){
              var $obj = $(this);
              $obj.text('注册中...');
              setTimeout(function(){
                  $obj.text('注册');
              },5000);
          });



      });
  </script>
</body>
</html>
